<script setup>
/**
 * & 文件引入区域
 */
import { useRouter } from "vue-router";
import { useIndexStore } from "@/stores/indexStore";

/**
 * & 注册区
 */
const props = defineProps([
  "type",
  "borr",
  "isfollow",
  "data",
  "fans",
  "itemId",
]);
defineEmits(["userFollowItemFun", "userUnfollowFun"]);

/**
 * & 变量声明区
 */
const router = useRouter();

/**
 * & 函数区
 */
const goPublisherFun = () => {
  let publisherData = JSON.stringify(props.data);
  router.push({
    path: "/publisher",
    query: {
      itemId: props.itemId,
    },
  });
};
</script>

<template>
  <!-- 
      type: 样式类型 | number | 1,2
      borr: 商家logo的圆角，不写默认不设置
      isfollow: 判断用户是否关注该店铺
      @userUnfollowFun: 用于用户关注店铺的方法
      @userUnfollowFun: 用于用户取关店铺的方法
      data: 网店详情数据
      fans: 粉丝数
      itemId: 网店id
   -->

  <div class="publisher" v-if="data">
    <div class="top">
      <img
        alt=""
        :class="['logo', useIndexStore().isRtl ? 'is_rtl' : '']"
        v-lazy="data.userImage"
        :style="{ 'border-radius': borr + 'rem' }"
      />

      <div class="right">
        <div class="info">
          <div class="name">{{ data.shopName }}</div>

          <div
            class="follow"
            :style="type == 2 ? { marginTop: 7 + 'rem' } : {}"
            @click="$emit('userFollowItemFun')"
            v-if="!isfollow"
          >
            {{ $t("item.details.follow") }}
          </div>

          <div
            class="follow"
            :style="type == 2 ? { marginTop: 7 + 'rem' } : {}"
            @click="$emit('userUnfollowFun')"
            v-else
          >
            {{ $t("item.details.unFollow") }}
          </div>
        </div>

        <div class="btn">
          <div class="score" v-if="type == 1">
            <div class="num">5</div>

            <div class="start">
              <img
                src="/images/Home/start1.png"
                alt=""
                class="start"
                v-for="(item, i) in Math.min(parseInt(data.score) || 5, 5)"
                :key="i"
              />
              <img
                src="/images/Home/start2.png"
                alt=""
                class="start"
                 v-for="(item, i) in Math.max(5 - (parseInt(data.score) || 5), 0)"
                :key="i"
              />
            </div>
          </div>

          <div class="fans">{{ fans }} {{ $t("item.details.fans") }}</div>
        </div>
      </div>
    </div>

    <div class="score" v-if="type == 2">
      <div class="num">{{ data.score }}</div>
      <div class="start">
        <img
          src="/images/Home/start1.png"
          alt=""
          class="start"
         v-for="(item, i) in Math.min(parseInt(data.score) || 5, 5)"
          :key="i"
        />
        <img
          src="/images/Home/start2.png"
          alt=""
          class="start"
           v-for="(item, i) in Math.max(5 - (parseInt(data.score) || 5), 0)"
          :key="i"
        />
      </div>
    </div>

    <div class="bottom" v-if="type == 1">
      <div class="title">There are {{ data.itemCommoditySum }} items</div>
      <div class="btn" @click="goPublisherFun">
        {{ $t("item.details.enter") }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@mixin scoreStyle {
  .score {
    display: flex;
    align-items: center;

    > .num {
      margin: 0 4rem;
    }

    > .start img {
      width: 16rem;
      margin-right: 2rem;
    }
  }
}

.publisher {
  position: relative;
  z-index: 10;
  background: #fff;
  padding: 12rem;
  border-radius: 12rem;

  @include scoreStyle();

  > .top {
    display: flex;
    padding-bottom: 16rem;
    position: relative;

    > .logo {
      width: 68rem;
      height: 68rem;
      margin-right: 16rem;
      flex-shrink: 0;

      &.is_rtl {
        margin-left: 16rem;
        margin-right: 0rem;
      }
    }

    > .right {
      flex: 1;

      > .info {
        display: flex;
        justify-content: space-between;

        .name {
          font-size: 20rem;
          line-height: 28rem;
          font-weight: 500;
          color: #333;
        }

        > .follow {
          padding: 4rem 14rem;
          border: 1rem solid #642e8e;
          color: #642e8e;
          border-radius: 4rem;
          margin-bottom: 6rem;
          font-size: 12rem;
        }
      }

      > .btn {
        font-size: 12rem;
        font-weight: 400;
        line-height: 16rem;

        display: flex;
        justify-content: space-between;

        @include scoreStyle;

        > .fans {
          font-size: 14rem;
          line-height: 20rem;
          color: #999;
        }
      }
    }
  }

  > .bottom {
    padding-top: 8rem;
    position: relative;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 14rem;
    font-weight: 400;
    line-height: 18rem;
    color: #666;

    &::before {
      position: absolute;
      content: "";

      top: 0;
      left: 0;
      background: #e6e6e6;
      height: 1rem;
      width: 100%;
    }

    > .btn {
      background: #642e8e;
      border-radius: 4rem;
      padding: 4rem 16rem;
      font-size: 12rem;
      line-height: 16rem;
      color: #fff;
    }
  }
}
</style>
